<template>
  <div class="app-container2 suanfa_wrap">
    <div class="content_main">
      <div class="search_wrap">
        <div class="search_list">
          <div class="search_item">
            <div class="name">设备类型:</div>
            <div class="ipts">
              <el-select
                class="js_common_select"
                v-model="leixingVal"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in leixingOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search_item search_item2">
            <div class="name">诊断时间段:</div>
            <div class="ipts">
              <el-date-picker
                class="jk_common_date_picker"
                v-model="dateValArr"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :append-to-body="false"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="search_item">
            <div class="name">创建用户:</div>
            <div class="ipts">
              <el-input
                class="js_common_input"
                v-model="createUserNameVal"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
          <div class="search_item">
            <div class="name">模型类型:</div>
            <div class="ipts">
              <el-select
                class="js_common_select"
                v-model="leixing2Val"
                placeholder="请选择"
                :popper-append-to-body="false"
              >
                <el-option
                  v-for="item in leixing2Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="search_item">
            <div class="name">模型名称:</div>
            <div class="ipts">
              <el-input
                class="js_common_input"
                v-model="nameVal"
                placeholder="请输入内容"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="search_btns">
          <el-button class="js_common_btn">导出</el-button>
          <el-button class="js_common_btn">模型算法查询</el-button>
        </div>
      </div>
      <div class="table_content_wrap">
        <div class="table_wrap">
          <el-table
            border
            class="jk_common_table003"
            :data="tableData"
            height="style"
            style="width: 100%; height: 100%"
          >
            <el-table-column
              type="selection"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column label="序号" align="center" width="120">
              <template slot-scope="scop">
                {{ scop.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="模型名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="modelType"
              label="模型类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="time"
              label="模型创建时间"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sbName"
              label="设备名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="sbType"
              label="设备类型"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <div class="table_caozuo_btns">
                  <div
                    class="table_caozuo_btn"
                    @click="watchTableItemFn(scope.row)"
                  >
                    详情
                  </div>
                  <div
                    class="table_caozuo_btn"
                    @click="removeTableItemFn(scope.row)"
                  >
                    删除
                  </div>
                  <div
                    class="table_caozuo_btn"
                    @click="updateTableItemFn(scope.row)"
                  >
                    更新
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fenye_wrap">
          <div class="checkout_main">
            <div
              class="checkout_item"
              v-for="item in checkoutList"
              :key="item.id"
              @click="onRadioFn(item.id)"
            >
              <div
                :class="['my_radio_box', checkoutActItem === item.id && 'act']"
              ></div>
              <div class="radid_text">{{ item.name }}</div>
            </div>
          </div>
          <div class="fenye_main">
            <el-pagination
              class="js_common_fenyeqi"
              :current-page="1"
              :page-size="10"
              :pager-count="5"
              :append-to-body="false"
              popper-class="js_common_fenyeqi_popper"
              layout="prev, pager, next,sizes, jumper"
              :total="400"
            >
            </el-pagination>
            <div class="btns_main">
              <el-button class="js_common_btn">模型算法测试</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="other_content_wrap">
        <div class="title_wrap"></div>
        <div class="desc_wrap">
          <el-scrollbar class="el-scrollbar-bai">
          </el-scrollbar>
        </div>
      </div>
      <div class="suanfa_btn">
        <el-button class="js_common_btn">模型算法解析</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dateValArr: [],
      leixingVal: "",
      leixingOptions: [
        {
          value: "选项1",
          label: "历史服务器",
        },
        {
          value: "选项2",
          label: "计算服务器",
        },
        {
          value: "选项3",
          label: "控制站",
        },
        {
          value: "选项4",
          label: "操作员站",
        },
      ],
      leixing2Val: "",
      leixing2Options: [
        {
          value: "选项1",
          label: "模型类型1",
        },
        {
          value: "选项2",
          label: "模型类型2",
        },
        {
          value: "选项3",
          label: "模型类型3",
        },
      ],
      guzhangVal: "",
      guzhangOptions: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      nameVal: "",
      createUserNameVal: "",
      tableData: [
        {
          id: "000001",
          name: "模型名称001",
          modelType: "模型类型001",
          time: "2022-11-11 12:11:12",
          sbName: "设备名称001",
          sbType: "设备类型001",
        },
        {
          id: "000002",
          name: "模型名称002",
          modelType: "模型类型002",
          time: "2022-11-11 12:11:12",
          sbName: "设备名称002",
          sbType: "设备类型002",
        },
        {
          id: "000003",
          name: "模型名称003",
          modelType: "模型类型003",
          time: "2022-11-11 12:11:12",
          sbName: "设备名称003",
          sbType: "设备类型003",
        },
        {
          id: "000004",
          name: "模型名称004",
          modelType: "模型类型004",
          time: "2022-11-11 12:11:12",
          sbName: "设备名称004",
          sbType: "设备类型004",
        },
        {
          id: "00000",
          name: "模型名称00",
          modelType: "模型类型00",
          time: "2022-11-11 12:11:12",
          sbName: "设备名称00",
          sbType: "设备类型00",
        },
      ],
      checkoutList: [
        {
          id: "01",
          name: "只读状态",
        },
        {
          id: "02",
          name: "编辑状态",
        },
      ],
      checkoutActItem: "01",
    };
  },
  methods: {
    watchTableItemFn(item) {
      console.log(item);
    },
    removeTableItemFn(item) {
      console.log(item);
    },
    updateTableItemFn(item) {
      console.log(item);
    },
    onChangeCheckoutFn(item) {
      let obj = this.checkoutList;
      console.log(item);
    },
    onRadioFn(id) {
      this.checkoutActItem = id;
    },
  },
};
</script>
<style lang="scss" scoped>
.suanfa_wrap {
  background: linear-gradient(to bottom, #0d1f3c, #163368);
  box-sizing: border-box;
  border: 2px solid #335173;
  .content_main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .search_wrap {
      flex: 0 0 auto;
      box-sizing: border-box;
      padding: 20px 30px;
      position: relative;
      .search_list {
        display: flex;
        flex-wrap: wrap;
        .search_item {
          display: flex;
          flex: 0 0 auto;
          width: 20%;
          align-items: center;
          font-size: 18px;
          color: #ccc;
          margin-right: 3%;
          margin-bottom: 24px;
          &:nth-child(4n) {
            margin-right: 0;
          }
          &:last-child {
            margin-bottom: 0;
          }
          .name {
            flex: 0 0 auto;
          }
          .ipts {
            flex: 1 1 auto;
            margin-left: 10px;
          }
        }
        .search_item2 {
          width: 31%;
        }
      }
      .search_btns {
        position: absolute;
        right: 4px;
        bottom: 20px;
        .js_common_btn {
          margin-right: 24px;
        }
      }
    }
    .table_content_wrap {
      flex: 1 1 auto;
      width: 100%;
      height: 0;
      display: flex;
      flex-direction: column;
      .table_wrap {
        flex: 1 1 auto;
        width: 100%;
        height: 0;
      }
      .fenye_wrap {
        flex: 0 0 auto;
        box-sizing: border-box;
        padding: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .checkout_main {
          display: flex;
          align-items: center;
          .checkout_item {
            display: flex;
            align-items: center;
            margin-left: 30px;
            cursor: pointer;
            &:first-child {
              margin-left: 0;
            }
            .my_radio_box {
              width: 18px;
              height: 18px;
              border: 2px solid #fff;
              border-radius: 2px;
              box-sizing: border-box;
              &.act {
                border-color: #2892d1;
                position: relative;
                &::after {
                  content: "";
                  width: 10px;
                  height: 6px;
                  border: 2px solid #2892d1;
                  border-top: transparent;
                  border-right: transparent;
                  text-align: center;
                  display: block;
                  position: absolute;
                  top: 3px;
                  left: 2px;
                  transform: rotate(-45deg);
                  border-radius: 0px;
                  background: none;
                }
              }
            }
            .radid_text {
              font-size: 18px;
              color: #cbcbcb;
              margin-left: 10px;
              line-height: 1;
            }
          }
        }
        .fenye_main {
          display: flex;
          align-items: center;
          .btns_main {
            margin-left: 20px;
          }
        }
      }
    }
    .other_content_wrap {
      flex: 0 0 auto;
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #2389c1;
      .title_wrap {
        width: 100%;
        height: 56px;
        background: linear-gradient(to bottom, #0b2954, #124181);
      }
      .desc_wrap {
        width: 100%;
        height: 140px;
        box-sizing: border-box;
        padding: 15px 50px;
        font-size: 20px;
        color: #cbcbcb;
        line-height: 34px;
      }
    }
    .suanfa_btn {
      width: 100%;
      flex: 0 0 auto;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.table_caozuo_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  .table_caozuo_btn {
    margin-left: 10px;
    width: 36px;
    cursor: pointer;
    color: #7dbdcc;
    &:hover {
      text-decoration: underline;
    }
    &:first-child {
      margin-left: 0;
    }
  }
}
</style>
